<template>
	<view>
		<view class="form-container">
			<view class="area_container">
				<view class="logo_name">
					<image :src="Order.logo" class="seller_logo"></image>
					<view class="seller_name">
						<text>{{Order.sellername}}</text>
					</view>
				</view>
				<view class="radio_container">
					<radio-group @change="radioChange">
						<label class="radio">
							<radio value="3" checked="true" />好评</label>
						<label class="radio">
							<radio value="2" />中评</label>
						<label class="radio">
							<radio value="1" />差评</label>
					</radio-group>
				</view>
				<textarea v-model="content" class="comment_area" placeholder-style="color:#99a1a2" placeholder="客观评价一下吧!!!" />
			</view>
		</view>
		<view class="btn_container">
			<button @click="submit()" type="default" :disabled="content==''?true:false" :style="content==''?'background-color:#8c8e9c':'background-color:#00AAFF;color:#FFFFFF'">提交</button>
		</view>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message type="success" message="评论成功" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	export default {
		components: {
		        uniPopup,
		        uniPopupMessage
		},
		data() {
			return {
				content: '',
				Order: '',
				start: 3,
				ip: "http://localhost:10998"
			}
		},
		methods: {
			submit: function(){
				var that = this
				uni.request({
					url: this.ip + "/submitComment/" + this.Order.sellerId + "/" + this.content + "/" + this.start,
					success:function(){
						that.$refs.popup.open()
						that.content = ''
					}
				})
			},
			radioChange: function(e){
				this.start = e.target.value
			}
		},
		onLoad:function(option){
			var that = this
			uni.$on('goComment', function(data) {
				// 移除监听器
				uni.$off('goComment')
				that.Order = data.Order
			})
		}
	}
</script>

<style>
	.radio {
		margin-right: 20rpx;
	}
	
	.radio_container {
		margin-bottom: 20rpx;
	}
	
	button {
		width: 690rpx;
		border-radius: 1em;
	}
	
	.btn_container {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}
	
	.seller_logo {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
		margin-left: 10rpx;
	}
	
	.logo_name {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;
	}
	
	.seller_name {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.form-container {
		width: 750rpx;
		display: flex;
		justify-content: center;
		margin-top: 80rpx;
	}
	
	.area_container {
		width: 630rpx;
		height: 700rpx;
		background-color: #FFFFFF;
		border-radius: 2em;
		padding: 30rpx;
	}
	
	.comment_area {
		width: 590rpx;
		height: 500rpx;
		background-color: #fafafa;
		padding: 20rpx;
		font-size: 30rpx;
		border-radius: 2em;
	}
	
	page {
		background-color: #fafafa;
	}
</style>
